<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_元素显示模式</title>
    <style>
       /*块级元素：可以自定义宽高，元素纵向排列*/
       div {
         width: 100px;
         height: 100px;
         border: 5px solid red;
         display: block;
       }
       /*行内元素：无法设置宽高，可以与其他元素共处一行，横向排列，大小是根据内容自动调整*/
       span {
         width: 100px;
         height: 200px;
         background-color: chartreuse;
         display: inline;
       }
       /*行内块元素既能设置宽高又能横向排列*/
       input,button {
         width: 100px;
         height: 100px;
         display: inline-block;
       }
       /*元素消失且释放自己占据的页面空间*/
       .d2 {
         display: none;
       }
    </style>
</head>
<body>
  <div class="d1">111</div>
  <div class="d2">222</div>
  <div class="d3">333</div>
  <hr>
  <span>12345678789</span>
  <span>12345678789</span>
  <span>12345678789</span>
  <hr>
  <input type="text">
  <input type="text">
  <button>按钮</button>
</body>
</html>